<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>交易管理</el-breadcrumb-item>
			<el-breadcrumb-item>分期交易管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="20">
				<el-col :span="3">
					<el-input v-model="custId" placeholder="手机号/userid"></el-input>
				</el-col>
				<el-col :span="3">
					<el-input v-model="seachlist.loanNo" placeholder="借据号"></el-input>
				</el-col>
				<el-col :span="3">
					<el-select v-model="seachlist.tradingStatus" placeholder="请选择交易状态">
						<el-option
						  v-for="item in statuslist"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col>
				<el-col :span="3">
					<el-select v-model="seachlist.tradingAttribute" placeholder="请选择交易属性">
						<el-option
						  v-for="item in attributelist"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col>
				<el-col :span="3">
					<el-select v-model="seachlist.repaymentStatus" placeholder="请选择还款状态">
						<el-option
						  v-for="item in repaymentlist"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				</el-col>
				<el-col :span="3">
					<el-input v-model="seachlist.businessAffairsName" placeholder="跟进人姓名"></el-input>
				</el-col>
				<el-date-picker
					v-model="value1"
					type="daterange"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					@change="changeDate">
				</el-date-picker>
				
				<el-button type="primary" @click="searchUserList">搜索</el-button>
				<el-button @click="clear">清空</el-button>
				<el-button type="primary">导出</el-button>
			</el-row>
			<el-table :data="stagesList" border stripe>
				<el-table-column min-width='160px' label="借据号" prop="loanNo"></el-table-column>
				<el-table-column label="借款用户"  min-width='100px'>
					<template slot-scope="scope">
						<span style="color: #0066CC;" @click="toUser(scope.row.phone)">{{scope.row.phone}}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户姓名" prop="custName">
				</el-table-column>
				<el-table-column label="性别">
					<template slot-scope="scope">
						<span v-if="scope.row.sex == 'F'">女</span>
						<span v-if="scope.row.sex == 'M'">男</span>
					</template>
				</el-table-column>
				<el-table-column label="分期金额" prop="amount">
					<!-- <template slot-scope="scope">
						<span>{{scope.row.amount.split('.')[0]}}</span>
					</template> -->
				</el-table-column>
				<el-table-column label="交易状态">
					<template slot-scope="scope">
						<span v-if="scope.row.tradingStatus == '0'">成功</span>
						<span v-if="scope.row.tradingStatus == '1'">失败</span>
						<span v-if="scope.row.tradingStatus == '2'">处理中</span>
						<span v-if="scope.row.tradingStatus == '3'">已取消</span>
					</template>
				</el-table-column>
				<el-table-column label="交易属性" prop="tradingAttribute">
					<template slot-scope="scope">
						<span v-if="scope.row.tradingAttribute == '0'">首借</span>
						<span v-if="scope.row.tradingAttribute == '1'">复借</span>
					</template>
				</el-table-column>
				<el-table-column label="分期申请时间" prop="applyTime"></el-table-column>
				<el-table-column label="放款日" prop="grantTime"></el-table-column>
				<!-- <el-table-column label="到期日" prop="loanDeadlineTime"></el-table-column> -->
				<el-table-column label="期数" prop="loanDeadline"></el-table-column>
				<el-table-column label="还款状态" prop="repaymentStatus">
					<template slot-scope="scope">
						<span v-if="scope.row.repaymentStatus == '10'">还款中</span>
						<span v-if="scope.row.repaymentStatus == '11'">已结清</span>
						<span v-if="scope.row.repaymentStatus == '20'">已逾期</span>
					</template>
				</el-table-column>
				<el-table-column label="收款商户" prop="shopName"></el-table-column>
				<el-table-column label="跟进人" prop="businessAffairsName"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button style="margin-bottom: 10px;" @click="updateLoanStatus(scope.row.loanNo)" type="primary" size="mini">更新交易状态</el-button>
						<el-button style="margin-left: 0;" @click="updateRepayStatus(scope.row.loanNo)" type="primary" size="mini">更新还款状态</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- <el-button style="margin-bottom: 10px;" @click="updateLoanStatus(scope.row.loanNo)" type="primary" size="mini">更新状态</el-button> -->
						<el-button @click="showLoanDialog(scope.row.loanNo)" type="primary" size="mini">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageNum"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<!-- 查看详情弹窗 -->
			<el-dialog
			  title="订单详情"
			  :visible.sync="LoanDialogVisible"
			  width="80%"
			  class="userDialog">
				<el-tabs v-model="activeName" @tab-click="handleClick">
				    <el-tab-pane label="基本信息" name="first">
						<el-form ref="LoanFormRef" :model="LoanForm" label-width="110px">
							<el-form-item label="交易状态">
								<el-input v-model="LoanForm.tradingStatus" disabled></el-input>
							</el-form-item>
							<el-form-item label="消费总额">
								<el-input v-model="LoanForm.amount" disabled></el-input>
							</el-form-item>
							<el-form-item label="收款商户" style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.shopName" disabled></el-input>
							</el-form-item>
							<el-form-item>
							</el-form-item>	
							<el-form-item label="放款日">
								<el-input v-model="LoanForm.rateTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="起息日">
								<el-input v-model="LoanForm.grantTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="到期日">
								<el-input v-model="LoanForm.endTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款日">
								<el-input v-model="LoanForm.repayDay" disabled></el-input>
							</el-form-item>
							<el-form-item label="分期期限">
								<el-input v-model="LoanForm.loanDeadline" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款状态" style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.repaymentStatus" disabled></el-input>
							</el-form-item>
							
							<el-form-item label="消费项目">
								<el-input v-model="LoanForm.first_items+'-'+LoanForm.second_items+'-'+LoanForm.third_items" disabled></el-input>
							</el-form-item>
							<el-form-item label="消费说明" style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.consumptionDescription" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款方式">
								<el-input v-model="LoanForm.repayMethod" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款账户">
								<el-input v-model="LoanForm.repayBank" disabled></el-input>
							</el-form-item>
							<el-form-item label="借款人">
								<el-input v-model="LoanForm.user" disabled></el-input>
							</el-form-item>
							<el-form-item label="贷款发放人">
								<el-input v-model="LoanForm.grantCode" disabled></el-input>
							</el-form-item>
							<el-form-item label="返回编码">
								<el-input v-model="LoanForm.returnCode" disabled></el-input>
							</el-form-item>
							<el-form-item label=" 返回消息">
								<el-input v-model="LoanForm.returnMsg" disabled></el-input>
							</el-form-item>
							<el-form-item label="流水号">
								<el-input v-model="LoanForm.applSeq" disabled></el-input>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				    <el-tab-pane label="详情信息" name="second">
						<el-form ref="LoanFormRef" :model="LoanForm" label-width="110px">
							<el-form-item label="分期金额">
								<el-input v-model="LoanForm.amount" disabled></el-input>
							</el-form-item>
							<el-form-item label="收款商户">
								<el-input v-model="LoanForm.shopName" disabled></el-input>
							</el-form-item>
							<el-form-item label="分期期限">
								<el-input v-model="LoanForm.loanDeadline" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款方式">
								<el-input v-model="LoanForm.repayMethod" disabled></el-input>
							</el-form-item>
							<el-form-item label="消费项目">
								<el-input v-model="LoanForm.first_items+'-'+LoanForm.second_items+'-'+LoanForm.third_items" disabled></el-input>
							</el-form-item>
							<el-form-item label="消费说明">
								<el-input v-model="LoanForm.consumptionDescription" disabled></el-input>
							</el-form-item>
							<el-form-item label="贷款发放人" style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.grantCode" disabled></el-input>
							</el-form-item>
							<el-form-item>
							</el-form-item>
							
							<el-form-item label="申请人姓名">
								<el-input v-model="LoanForm.user" disabled></el-input>
							</el-form-item>
							<el-form-item label="申请人手机号">
								<el-input v-model="LoanForm.userPhone" disabled></el-input>
							</el-form-item>
							<el-form-item label="申请人性别">
								<el-input v-model="LoanForm.sex" disabled></el-input>
							</el-form-item>
							<el-form-item label="申请人年龄">
								<el-input v-model="LoanForm.age" disabled></el-input>
							</el-form-item>
							<el-form-item label="身份证号">
								<el-input v-model="LoanForm.idCard" disabled></el-input>
							</el-form-item>
							<el-form-item label="还款账户">
								<el-input v-model="LoanForm.repayBank" disabled></el-input>
							</el-form-item>
							<el-form-item label="项目确认单">
								<span v-if="LoanForm.projectsrcList.length>0" style="margin-right: 20px;" class="viewpicture" @click="openDialogVisible(LoanForm.projectsrcList)">点击查看图片</span>
								<span v-if="LoanForm.projectpdfList.length>0" class="viewpicture" @click="openDialogPDFVisible(LoanForm.projectpdfList)">点击查看pdf</span>
							</el-form-item>
							<el-form-item label="芝麻信用分">
								<span v-if="LoanForm.zhimasrcList.length>0" style="margin-right: 20px;" class="viewpicture" @click="openDialogVisible(LoanForm.zhimasrcList)">点击查看图片</span>
								<span v-if="LoanForm.zhimapdfList.length>0" class="viewpicture" @click="openDialogPDFVisible(LoanForm.zhimapdfList)">点击查看pdf</span>
							</el-form-item>
							<el-form-item label="其他材料">
								<span v-if="LoanForm.othersrcList.length>0" style="margin-right: 20px;" class="viewpicture" @click="openDialogVisible(LoanForm.othersrcList)">点击查看图片</span>
								<span v-if="LoanForm.otherpdfList.length>0" class="viewpicture" @click="openDialogPDFVisible(LoanForm.otherpdfList)">点击查看pdf</span>
								<span v-if="LoanForm.othersrcList.length<1 && LoanForm.otherpdfList.length<1">未上传</span>
							</el-form-item>
							<el-form-item label="身份证">
								<span v-if="LoanForm.ocrCardIdCardList.length>0" style="margin-right: 20px;" class="viewpicture" @click="openDialogVisible(LoanForm.ocrCardIdCardList)">点击查看图片</span>
							</el-form-item>
							<el-form-item label="人脸照片">
								<span v-if="LoanForm.faceOssUrlList.length>0" style="margin-right: 20px;" class="viewpicture" @click="openDialogVisible(LoanForm.faceOssUrlList)">点击查看图片</span>
							</el-form-item>
							<el-form-item label="婚姻状况">
							    <el-select v-model="LoanForm.indivMarital" placeholder="请选择婚姻状况" disabled >
							      <el-option v-for="(item,index) in indivMaritalList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="配偶姓名" v-if="LoanForm.indivMarital=='20'">
								<el-input v-model="LoanForm.spouseName" disabled></el-input>
							</el-form-item>
							<el-form-item label="配偶手机号" v-if="LoanForm.indivMarital=='20'">
								<el-input v-model="LoanForm.spouseMobile" disabled></el-input>
							</el-form-item>
							<el-form-item label="最高学历">
							    <el-select v-model="LoanForm.indivEdu" placeholder="请选择最高学历" disabled >
							      <el-option v-for="(item,index) in indivEduList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="居住情况">
							    <el-select v-model="LoanForm.liveInfo" placeholder="请选择居住情况" disabled >
							      <el-option v-for="(item,index) in liveInfoList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="居住地址">
								<el-input v-model="LoanForm.live" disabled></el-input>
							</el-form-item>
							<el-form-item label="本地居住年限">
								<el-input v-model="LoanForm.liveYear" disabled></el-input>
							</el-form-item>
							<el-form-item label="户口性质">
							    <el-select v-model="LoanForm.localResid" placeholder="请选择户口性质" disabled >
							      <el-option v-for="(item,index) in localResidList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="户籍所在地">
								<el-input v-model="LoanForm.reg" disabled></el-input>
							</el-form-item>
							<el-form-item label="子女数">
								<el-input v-model="LoanForm.indivDepno" disabled></el-input>
							</el-form-item>
							<el-form-item label="月收入（元）">
								<el-input v-model="LoanForm.indivMthinc" disabled></el-input>
							</el-form-item>
							<el-form-item label="年收入（元）" style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.annualEarn" disabled></el-input>
							</el-form-item>
							<el-form-item>
							</el-form-item>
							<el-form-item label="工作性质">
							    <el-select v-model="LoanForm.positionOpt" placeholder="请选择工作性质" disabled >
							      <el-option v-for="(item,index) in positionOptList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<!-- 受薪人士 -->
							<el-form-item label="单位名称" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.indivEmpName" disabled></el-input>
							</el-form-item>
							<el-form-item label="所在部门" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.indivBranch" disabled></el-input>
							</el-form-item>
							<el-form-item label="单位性质" v-if="LoanForm.positionOpt=='10'">
							    <el-select v-model="LoanForm.indivEmptyp" placeholder="请选择单位性质" disabled >
							      <el-option v-for="(item,index) in indivEmpTypList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="现单位工龄" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.indivEmpyrs" disabled></el-input>
							</el-form-item>
							<el-form-item label="单位地址" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.work" disabled></el-input>
							</el-form-item>
							<el-form-item label="单位所在地邮编" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.indivEmpZip" disabled></el-input>
							</el-form-item>
							<el-form-item label="办公电话" v-if="LoanForm.positionOpt=='10'">
								<el-input v-model="LoanForm.indivEmpZone+'-'+LoanForm.indivEmpTel" disabled></el-input>
							</el-form-item>
							<el-form-item label="职务" v-if="LoanForm.positionOpt=='10'">
							    <el-select v-model="LoanForm.indivPosition" placeholder="请选择职务" disabled >
							      <el-option v-for="(item,index) in indivPositionList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="总工龄" v-if="LoanForm.positionOpt=='10'"  style="margin-bottom: 30px;">
								<el-input v-model="LoanForm.indivWorkYrs" disabled></el-input>
							</el-form-item>
							<!-- 自雇人士 -->
							<el-form-item label="企业名称" v-if="LoanForm.positionOpt=='20'">
								<el-input v-model="LoanForm.empRegName" disabled></el-input>
							</el-form-item>
							<el-form-item label="企业联系电话" v-if="LoanForm.positionOpt=='20'">
								<el-input v-model="LoanForm.empRegRelTel" disabled></el-input>
							</el-form-item>
							<el-form-item label="经营实体类型" v-if="LoanForm.positionOpt=='20'" style="margin-bottom: 30px;">
							    <el-select v-model="LoanForm.manageTyp" placeholder="请选择经营实体类型" disabled >
							      <el-option v-for="(item,index) in manageTypList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<!-- 学生 -->
							<el-form-item label="学习方式" v-if="LoanForm.positionOpt=='40'">
							    <el-select v-model="LoanForm.studyMth" placeholder="请选择学习方式" disabled >
							      <el-option v-for="(item,index) in studyMthList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="在读学历" v-if="LoanForm.positionOpt=='40'">
							    <el-select v-model="LoanForm.studyingDeg" placeholder="请选择在读学历" disabled >
							      <el-option v-for="(item,index) in studyingDegList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="学校名称" v-if="LoanForm.positionOpt=='40'">
								<el-input v-model="LoanForm.schoolName" disabled></el-input>
							</el-form-item>
							<el-form-item label="学校性质" v-if="LoanForm.positionOpt=='40'">
							    <el-select v-model="LoanForm.schoolKind" placeholder="请选择学校性质" disabled >
							      <el-option v-for="(item,index) in schoolKindList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="专业" v-if="LoanForm.positionOpt=='40'">
								<el-input v-model="LoanForm.studyMajor" disabled></el-input>
							</el-form-item>
							<el-form-item label="学制" v-if="LoanForm.positionOpt=='40'">
							    <el-select v-model="LoanForm.schoolLeng" placeholder="请选择学制" disabled >
							      <el-option v-for="(item,index) in schoolLengList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item label="年级" v-if="LoanForm.positionOpt=='40'"  style="margin-bottom: 30px;">
							    <el-select v-model="LoanForm.geade" placeholder="请选择年级" disabled >
							      <el-option v-for="(item,index) in geadeList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							
							<el-form-item label="联系人姓名">
								<el-input v-model="LoanForm.relName" disabled></el-input>
							</el-form-item>
							<el-form-item label="联系人手机号">
								<el-input v-model="LoanForm.relMobile" disabled></el-input>
							</el-form-item>
							<el-form-item label="关系"  style="margin-bottom: 30px;">
							    <el-select v-model="LoanForm.relRelation" placeholder="联系人与申请人关系" disabled >
							      <el-option v-for="(item,index) in relRelationList" :label="item.value" :value="item.code"></el-option>
							    </el-select>
							</el-form-item>
							<el-form-item>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="还款记录" name="three">
						<el-table :data="recordJson" border stripe>
							<el-table-column label="还款金额" prop="amount"></el-table-column>
							<el-table-column label="还款时间" prop="repayTime"></el-table-column>
							<el-table-column label="还款状态">
								<template slot-scope="scope">
									<span v-if="scope.row.repayStatus == 'R3'">成功</span>
									<span v-if="scope.row.repayStatus == 'R2'">处理中</span>
									<span v-if="scope.row.repayStatus == 'R4'">失败</span>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				 </el-tabs>
			  <span slot="footer" class="dialog-footer">
			    <el-button v-if="LoanForm.isChargeback=='1'" type="primary" @click="openChargeback(LoanForm.loanNo)">退单</el-button>
			    <el-button type="primary" @click="LoanDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>
		</el-card>
		
		<el-dialog
		  title="图片"
		  :visible.sync="dialogVisible"
		  width="80%">
		  <div class="demo-image__preview">
		    <el-image 
				v-for="(item,index) in srcList"
		      style="width: 180px; height: 180px;margin-bottom: 20px;"
		      :src="item" 
		      :preview-src-list="srcList">
		    </el-image>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="文件"
		  :visible.sync="dialogPDFVisible"
		  width="80%">
		  <div class="demo-image__preview" style="display: flex;justify-content: space-around;">
				<div v-for="(item,index) in pdfList" @click="openpdf(item)">
					<img src="https://acetech.oss-cn-beijing.aliyuncs.com/aceTechConsumption/pdf.png" />
				</div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogPDFVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
		
		<!-- 照片弹窗 -->
		<el-dialog
		  title="照片"
		  :visible.sync="PicDialogVisible"
		  width="60%" class="popup" style="text-align: center;">
			<img class="dialog-img" :src="LoanForm.faceOssUrl" style="width: 50%;" />
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="PicDialogVisible = false">关闭</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import infoDic from "../assets/infoDictionaries.json"
	export default {
		data() {
			return {
				stagesList:[],
				total:0,/* 总页数 */
				pageSize:20,/* 每页几条 */
				pageNum:1,/* 当前为哪页 */
				custId: '',
				seachlist:{'phone':'','custId':'','startTime':'','endTime':'','loanNo':'','tradingStatus':'','businessAffairsName':'','tradingAttribute':'','repaymentStatus':''},/* 查询信息 */
				value1:'',/* 选择查询日期*/
				LoanDialogVisible:false,/* 借款详情弹窗开启状态 */
				activeName: 'first',/* 借款详情选项卡状态 */
				statuslist: [{
				  value: '',
				  label: '请选择交易状态'
				},{
				  value: '0',
				  label: '成功'
				}, {
				  value: '1',
				  label: '失败'
				},
				{
				  value: '2',
				  label: '处理中'
				},
				{
				  value: '3',
				  label: '已取消'
				}],
				attributelist: [{
				  value: '',
				  label: '请选择交易属性'
				},{
				  value: '0',
				  label: '首借'
				}, {
				  value: '1',
				  label: '复借'
				}],
				repaymentlist: [{
				  value: '',
				  label: '请选择还款状态'
				},{
				  value: '10',
				  label: '还款中'
				},{
				  value: '11',
				  label: '已结清'
				},{
				  value: '20',
				  label: '已逾期'
				}],
				LoanForm:{
					amount: "",
					grantBank: "",
					loanRate: "",
					rateTime: "",
					grantTime: "",
					endTime: "",
					repayDay: "",
					loanDeadline: "",
					loanPurpose: "",
					repayMethod: "",
					repayBank: "",
					user: "",
					grantCode: "",
					projectsrcList:[],
					othersrcList:[],
					zhimasrcList:[],
					projectpdfList:[],
					otherpdfList:[],
					zhimapdfList:[],
					ocrCardIdCardList:[],
					faceOssUrlList:[],
					live:'',/* 居住地址 */
					reg:'',/* 户籍 */
					work:'',/* 单位地址 */
				},/* 借款详情 */
				recordJson:[],/*, 还款详情 */
				srcList:[],
				pdfList:[],
				dialogVisible:false,
				dialogPDFVisible:false,
				PicDialogVisible:false,/* 人脸弹窗 */
				
				indivMaritalList:[],/* 婚姻状况 */
				indivEduList:[],/* 最高学历 */
				liveInfoList:[],/* 居住情况 */
				localResidList:[],/* 户口性质 */
				positionOptList:[],/* 工作性质 */
				relRelationList:[],/* 联系人与申请人关系 */
				indivEmpTypList:[],/* 婚姻状况 */
				indivPositionList:[],/* 职务 */
				manageTypList:[],/* 经营实体类型 */
				studyMthList:[],/* 学习方式 */
				studyingDegList:[],/* 在读学历 */
				schoolKindList:[],/* 学校性质 */
				schoolLengList:[],/* 学制 */
				geadeList:[],/* 年级 */
			}
		},
		async created() {
			this.seachlist.custId = this.$route.query.custId
			
			await this.gethtreecityList()
			this.indivMaritalList = infoDic.indivMaritalList/* 婚姻状况 */
			this.indivEduList = infoDic.indivEduList/* 最高学历 */
			this.liveInfoList = infoDic.liveInfoList/* 居住情况 */
			this.localResidList = infoDic.localResidList/* 户口性质 */
			this.positionOptList = infoDic.positionOptList/* 工作性质 */
			this.relRelationList = infoDic.relRelationList/* 联系人与申请人关系 */
			this.indivEmpTypList = infoDic.indivEmpTypList/* 婚姻状况 */
			this.indivPositionList = infoDic.indivPositionList/* 职务 */
			this.manageTypList = infoDic.manageTypList/* 经营实体类型 */
			this.studyMthList = infoDic.studyMthList/* 学习方式 */
			this.studyingDegList = infoDic.studyingDegList/* 在读学历 */
			this.schoolKindList = infoDic.schoolKindList/* 学校性质 */
			this.schoolLengList = infoDic.schoolLengList/* 学制 */
			this.geadeList = infoDic.geadeList/* 年级 */
			this.getList()
		},
		methods:{
			/* 获取三级省市区 */
			async gethtreecityList(){
				const {data:res} = await this.$http.get('/area/getAll')
				this.shopProcodeList = res.data
				// console.log(this.shopProcodeList)
			},
			/* 点击退单 */
			openChargeback(loanNo){
				const h = this.$createElement;
				        this.$msgbox({
				          title: '是否退单',
				          message: h('p', null, [
				            h('span', null, '请确认该笔分期订单已经退货或退款 ')
				            // h('i', { style: 'color: teal' }, 'VNode')
				          ]),
				          showCancelButton: true,
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          beforeClose: async (action, instance, done) => {
				            if (action === 'confirm') {
								instance.confirmButtonLoading = true;
								instance.confirmButtonText = '执行中...';
								const {data:res} = await this.$http.post('/sceneLoanAudit/chargeback',{
							  		loanNo:loanNo
							  	})
								console.log(res)
								if(res.code!==200) {
									setTimeout(() => {
									  done();
									 //  setTimeout(() => {
										// // instance.confirmButtonLoading = false;
									 //  }, 300);
									}, 1000);
									return this.$message.error(res.message)
								}
								setTimeout(() => {
								  done();
								  setTimeout(() => {
									instance.confirmButtonLoading = false;
								  }, 300);
								}, 1000);
								this.$message.success('提交成功')
								this.showLoanDialog(loanNo)
								this.getList()
				            } else {
				              done();
				            }
				          }
				        }).then(action => {
				          // this.$message({
				          //   type: 'info',
				          //   message: 'action: ' + action
				          // });
				        });
			},
			showPic(){
				this.PicDialogVisible = true
			},
			openDialogVisible(srcList){
				// var list = []
				// list.push(this.srcList)
				this.srcList = srcList
				this.dialogVisible=true
			},
			openDialogPDFVisible(srcList){
				this.pdfList = srcList
				this.dialogPDFVisible=true
			},
			openpdf(url){
				window.open(url);
			},
			changeDate(e){/* 修改日期 */
				if(e == null){
					this.seachlist.startTime = ''
					this.seachlist.endTime = ''
				}else{
					this.seachlist.startTime = e[0]
					this.seachlist.endTime = e[1]
				}
			},
			clear(){
				this.seachlist={'phone':'','custId':'','startTime':'','endTime':'','loanNo':'','tradingStatus':'','businessAffairsName':'','tradingAttribute':'','repaymentStatus':''}
			},
			searchUserList(){/* 查询按钮，把查询参数全都放到一个集合里面 */
				var _self = this
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.custId))) {
					_self.seachlist.phone=this.custId
					_self.seachlist.custId = ''
				}else if(/\C/.test(this.custId)){
					_self.seachlist.custId=this.custId
					_self.seachlist.phone = ''
				}else{
					_self.seachlist.phone = ''
					_self.seachlist.custId = ''
				} 
				this.getList()
			},
			async getList(){/* 获取用户列表 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				console.log(this.seachlist)
				const {data:res} = await this.$http.post('/sceneLoan/findLoanList',{
						pageSize:this.pageSize,
						pageNum:this.pageNum,
						phone:this.seachlist.phone,
						custId:this.seachlist.custId,
						businessAffairsName:this.seachlist.businessAffairsName,
						endTime:this.seachlist.endTime,
						startTime:this.seachlist.startTime,
						loanNo:this.seachlist.loanNo,
						repaymentStatus:this.seachlist.repaymentStatus,
						tradingAttribute:this.seachlist.tradingAttribute,
						tradingStatus:this.seachlist.tradingStatus,
					})
				console.log(res);
				this.stagesList = res.data.sceneLoanList
				this.total = res.data.total
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageNum = val
				this.getList()
			},
			toUser(phone){
				this.$router.push({path:'/user', query:{'phone': phone}})
			},
			async showLoanDialog(loanNo){/* 获取详细借款还款 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				// this.srcList = []
				// this.pdfList = []
				const {data:res} = await this.$http.post('/sceneLoanAudit/auditDetailsByLoanNo?loanNo='+loanNo)
				console.log(res)
				setTimeout(() => {
				  loading.close();
				}, 500);
				this.LoanDialogVisible = true
				this.LoanForm = Object.assign(res.data.loanJson,res.data.auditLoanDetails)
				this.recordJson = res.data.recordJson.recordArray
				
				this.LoanForm.projectsrcList=[];
				this.LoanForm.othersrcList=[];
				this.LoanForm.zhimasrcList=[];
				this.LoanForm.projectpdfList=[];
				this.LoanForm.otherpdfList=[];
				this.LoanForm.zhimapdfList=[];
				
				this.LoanForm.ocrCardIdCardList=[];/* 身份证图片 */
				this.LoanForm.ocrCardIdCardList.push(this.LoanForm.ocrCardIdCard)
				this.LoanForm.ocrCardIdCardList.push(this.LoanForm.ocrCardIdCardBackside)
				
				this.LoanForm.faceOssUrlList=[];/* 人脸图片 */
				this.LoanForm.faceOssUrlList.push(this.LoanForm.faceOssUrl)
				
				/* 居住详细地址 */
				/* 省市区联动 */
				this.LoanForm.live = ''
				this.shopProcodeList.forEach((item,index)=>{
					if(item.id == this.LoanForm.liveProvince){
						// this.shopCityList = item.children
						this.LoanForm.live += item.name
						item.children.forEach((itemc,indexc)=>{
							if(itemc.id == this.LoanForm.liveCity){
								this.LoanForm.live += itemc.name
								itemc.children.forEach((itema,indexa)=>{
									if(itema.id == this.LoanForm.liveArea){
										this.LoanForm.live += itema.name
										this.LoanForm.live += this.LoanForm.liveAddr
									}
								})
							}
						})
					}
				})
				
				/* reg户籍地址 */
				/* 省市区联动 */
				this.LoanForm.reg = ''
				this.shopProcodeList.forEach((item,index)=>{
					if(item.id == this.LoanForm.regProvince){
						this.LoanForm.reg += item.name
						item.children.forEach((itemc,indexc)=>{
							if(itemc.id == this.LoanForm.regCity){
								this.LoanForm.reg += itemc.name
							}
						})
					}
				})
				/* work单位地址 */
				this.LoanForm.work = ''
				this.shopProcodeList.forEach((item,index)=>{
					if(item.id == this.LoanForm.indivEmpProvince){
						// this.shopCityList = item.children
						this.LoanForm.work += item.name
						item.children.forEach((itemc,indexc)=>{
							if(itemc.id == this.LoanForm.indivEmpCity){
								this.LoanForm.work += itemc.name
								itemc.children.forEach((itema,indexa)=>{
									if(itema.id == this.LoanForm.indivEmpArea){
										this.LoanForm.work += itema.name
										this.LoanForm.work += this.LoanForm.empAddr
									}
								})
							}
						})
					}
				})
				
				res.data.loanJson.sceneImgList.forEach((item,index)=>{
					if(item.fileType != "pdf"){/* 图片格式 */
						// this.srcList.push(item.url)
						if(item.sceneType=='project'){/* 项目确认单 */
							this.LoanForm.projectsrcList.push(item.url)
						}else if(item.sceneType=='other'){/* 其他 */
							this.LoanForm.othersrcList.push(item.url)
						}else{/* 芝麻信用分 */
							this.LoanForm.zhimasrcList.push(item.url)
						}
					}else{/* pdf格式 */
						// this.pdfList.push(item.url)
						if(item.sceneType=='project'){/* 项目确认单 */
							this.LoanForm.projectpdfList.push(item.url)
						}else if(item.sceneType=='other'){/* 其他 */
							this.LoanForm.otherpdfList.push(item.url)
						}else{/* 芝麻信用分 */
							this.LoanForm.zhimapdfList.push(item.url)
						}
					}
				})
				
			},
			async updateLoanStatus(loanNo){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/sceneLoan/updateLoanStatus',{"loanNo":loanNo})
				setTimeout(() => {
				  loading.close();
				}, 500);
				console.log(res)
				if(res.code!==200) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				this.getList()
				
			},
			async updateRepayStatus(loanNo){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/sceneLoan/updateRepayStatus',{"loanNo":loanNo})
				setTimeout(() => {
				  loading.close();
				}, 500);
				console.log(res)
				if(res.code!==200) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				this.getList()
			},
			handleClick(tab, event) {
				console.log(this.activeName);
			 },
		}
	}
</script>

<style  lang="less" scoped>
	.el-col{
		margin-bottom: 10px;
	}
	.el-form{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.el-form-item{
		width: 47%;
		margin-bottom: 6px;
	}
	.el-range-editor.el-input__inner{
		margin-bottom: 10px;
		margin-right: 10px;
	}
	.viewpicture{
		color: #006CFF;
		text-decoration: underline;
	}
</style>
